<template>
    <div>
<h2>用户显示</h2>
<div>
<span>用户名:</span>
<input type="text" v-model="model.UserName">
<input type="button" value="登录" class="btn btn-success" @click="Getlist">
</div>
<table class="table">
<tbody>
    <tr class="bg-primary">
        <td>账号</td>
        <td>密码</td>
        <td>操作</td>
    </tr>


    <tr  v-for="item   in data.list " :key="item.id" >
        <td>{{item.UserName}}</td>
        <td>{{item.UserPwd}}</td>
        <td>操作</td>
    </tr>
</tbody>
</table>
<span>总条数:{{data.count}}</span>
<span>每页:{{model.size}}条</span>
<span>当前:{{model.index+'/'+data.page}}条</span>
    </div>
    <div>
        <input type="button" value="首页" class="btn btn-info" @click="getpage('a')" >
        <input type="button" value="上一页" class="btn btn-info" @click="getpage('b')">
        <input type="button" value="下一页" class="btn btn-info" @click="getpage('c')">
        <input type="button" value="尾页" class="btn btn-info" @click="getpage('d')">
    </div>
</template>

<script setup lang="ts">
import { ref,reactive, onMounted } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import axios from 'axios';
const route=useRoute();
const router=useRouter();


//定义变量
let model=reactive({
    UserName:'',
    index:1,
    size:3,
})


//定义分页变量
let data=reactive({
    list:[],
    count:0,
    page:0,
})

onMounted(()=>{
Getlist();
})

const Getlist=()=>{
axios({
url:'https://localhost:7276/api/admin/adminList',
method:'get',
params:model,
})

.then((res)=>{
    console.log(res);
    data.list=res.data.list;
    data.count=res.data.count;
    data.page=res.data.page;

})


.catch((ree)=>{
    console.log(ree);      
})


}



//分页
const getpage=(str:any)=>{

switch(str){

//首页
case'a':
if(model.index==1){
    return;
}
model.index=1;
break;

//上一页
case'b':
if(model.index==1&&data.page){
    return;

}
model.index--;
break;


//下一啊实打实大叔大婶撒大大阿达的页
case'c':
if(model.index==data.page){
    return;

}
model.index++;

break;


//尾页
case'd':

if(model.index==data.page){
    return;

}
model.index=data.page
break;


}
Getlist();





}
</script>

<style scoped>

</style>